<!--js代码-->
<script>
// 将组件引入
import ToDo from './components/ToDo.vue';
import AddList from '@/components/AddList.vue';
import ArticleVue from "@/components/ArticleVue.vue";
import CommentVue from "@/components/CommentVue.vue";
import CartVue from "@/components/CartVue.vue";
import KfmTable from "@/components/KfmTable.vue";
import KfmTableColumn from "@/components/KfmTableColumn.vue";
import {computed} from "vue";
import SlotVue from "@/components/SlotVue.vue";
import TestVue from "@/components/TestVue.vue";
import AxiosDemo from "@/components/AxiosDemo.vue";
import axios from 'axios'
// export default 默认导出
// name : 给当前组件起一个名字
// Vue实例 data() 函数 methods 属性 等等都声明在其中
export default {
    name: 'App',
    data() {
        return {
            items: [
                {id: 1, age: 20, name: '张三'},
                {id: 2, age: 20, name: '张三'},
                {id: 3, age: 20, name: '张三'},
                {id: 4, age: 20, name: '张三'},
            ],
            list: ['唱歌', '跳舞', 'rap', '篮球'],
            comments: [
                {id: 1, username: 'pomelo', content: '写的真好', likes: 2},
                {id: 2, username: 'zyj', content: '写的真不错', likes: 2},
                {id: 3, username: 'lgw', content: '写的真不赖', likes: 3},
            ],
            goods: {image: '/', price: 399, count: 2, name: '手机'},
            message: '你好',
            tableData: [
                {
                    date: '2016-05-03',
                    name: 'Tom',
                    address: 'No. 189, Grove St, Los Angeles',
                },
                {
                    date: '2016-05-02',
                    name: 'Tom',
                    address: 'No. 189, Grove St, Los Angeles',
                },
                {
                    date: '2016-05-04',
                    name: 'Tom',
                    address: 'No. 189, Grove St, Los Angeles',
                },
                {
                    date: '2016-05-01',
                    name: 'Tom',
                    address: 'No. 189, Grove St, Los Angeles',
                },
            ],
            username: '',
            password: ''
        }
    },
    methods: {
        del(val) {
            this.list = this.list.filter(item => item !== val)
        },
        addItem(val) {
            this.list.push(val)
        },
        up(id) {
            for (let i = 0; i < this.comments.length; i++) {
                if (this.comments[i].id === id) {
                    this.comments[i].likes++
                }
            }
        },
        editCount(val) {
            this.goods.count++
        },
        test(val) {
            console.log(val)
        },
        send() {
            axios({
                url: '/wx/user/login',
                method: 'POST',
                data: {
                    username: this.username,
                    password: this.password
                }
            }).then(res => {
                console.log(res)
                if (res.data.code === 1) {

                }
            })
        }
    },
    provide() {
        return {
            // 未来子孙组件中通过属性来获取值 msg 来获取值
            // 向子孙组件传递了一个值
            // 祖先组件中使用 provide函数 声明要传递的内容 return {key:value}
            // 要传递的是响应式数据 将数据使用 computed 函数 key: computed(() => this.message)
            // 后代组件中 使用 inject属性 接受传递的内容 inject:['key1', 'key2']
            "msg": computed(() => this.message),
            "money": 500,
            "test": this.test
        }
    },
    // 局部注册组件
    components: {
        ToDo,
        AddList,
        ArticleVue,
        CommentVue,
        CartVue,
        KfmTable,
        KfmTableColumn,
        SlotVue,
        TestVue,
        AxiosDemo
    },
    mounted() {
        console.log(this.$refs.mycart)
        // 是 CartVue的实例对象
        let cart = this.$refs.mycart;
        // cart.getLength()
        // this.$refs.myh2.innerText = "我修改了值"
    }
}
</script>

<!--html 代码 未来引用组件会放到组件 相当于自定义组件中的 template 属性的内容-->
<template>
    <!--ref 属性 为 DOM 元素绑定一个引用 $refs 中-->
    <!-- 原生DOM上使用 ref属性获取的就是DOM元素-->
    <!-- 组件上使用ref属性获取的就是 组件实例-->
    <h2 ref="myh2">我是App</h2>
    <!--<table>-->
    <!--  <tr v-for="item in items">-->
    <!--    <td>{{item.id}}</td>-->
    <!--    <td>{{item.age}}</td>-->
    <!--    <td>{{item.name}}</td>-->
    <!--  </tr>-->
    <!--</table>-->
    <!--<to-do v-for="item in list" :todo="item"></to-do>-->
    <!--<ToDo v-for="item in list" :todo="item" @del="del"/>-->
    <!--<AddList @add="addItem"/>-->
    <!--<ArticleVue/>-->
    <!--<CommentVue v-for="comment in comments" :comment="comment" @upvote="up"/>-->
    <!--<CartVue ref="mycart" :goods="goods" @add="editCount" :message="message"/>-->
    <!--<el-button type="success">我是一个按钮</el-button>-->
    <!--<cart-vue />-->
    <!--<kfm-table :data="tableData">-->
    <!--    <KfmTableColumn prop="name" label="姓名"/>-->
    <!--    <KfmTableColumn prop="date" label="日期"/>-->
    <!--    <KfmTableColumn prop="address" label="地址"/>-->
    <!--</kfm-table>-->


    <!--<slot-vue>-->
    <!--    <TestVue msg="test"/>-->
    <!--</slot-vue>-->

    <!--<input v-model="username"> <br/>-->

    <!--<input v-model="password"> <br />-->
    <!--<button @click="send" >登录</button>-->

    <!--<router-link to="/">Home</router-link>-->
    <!--|-->
    <!--<router-link to="/about">about</router-link>-->
    <!--|-->
    <!--<router-link to="/other">other</router-link>-->
    <!--|-->
    <!--指定 路由对应的组件应该放在什么地方-->
    <p>router-view</p>
    <router-view></router-view>


</template>
<!--css代码-->
<style scoped>
header {
    line-height: 1.5;
}

.logo {
    display: block;
    margin: 0 auto 2rem;
}

@media (min-width: 1024px) {
    header {
        display: flex;
        place-items: center;
        padding-right: calc(var(--section-gap) / 2);
    }

    .logo {
        margin: 0 2rem 0 0;
    }

    header .wrapper {
        display: flex;
        place-items: flex-start;
        flex-wrap: wrap;
    }
}
</style>
